import 'package:flutter/cupertino.dart';
import '../../public.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool isEdit = false;

  @override
  Widget build(BuildContext context) {
    return ProviderWidget<UserModel>(
      builder: (cyx, model, child) {
        return CupertinoPageScaffold(
          backgroundColor: Colors.white,
          navigationBar: CupertinoNavigationBar(
            border: const Border(bottom: BorderSide.none),
            trailing: GestureDetector(
              onTap: () {
                RouterHelper.navigator.pushNamed(Routers.types).then((value) {
                  if (value == null) return;
                  RouterHelper.navigator
                      .pushNamed(
                        Routers.form,
                        arguments: AccountItem(type: (value as Category).type),
                      )
                      .then((a) {
                        if (a == null) return;
                        model.addAccount(a as AccountItem);
                      });
                });
              },
              child: const Text(
                'Add',
                style: TextStyle(color: Colors.blueAccent),
              ),
            ),
          ),
          child: SafeArea(
            child: Material(
              child: GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () {
                  setState(() {
                    isEdit = false;
                  });
                },
                child: Column(
                  children: [
                    Expanded(
                      flex: 1,
                      child: GridView.count(
                        primary: false,
                        padding: const EdgeInsets.all(20),
                        crossAxisSpacing: 0,
                        mainAxisSpacing: 10,
                        crossAxisCount: 4,
                        children: List.generate(model.accounts.length, (index) {
                          return accountItem(
                            model.accounts[index],
                            onLongPress: () {
                              setState(() {
                                isEdit = true;
                              });
                            },
                            onDelete: () {
                              setState(() {
                                model.deleteAccount(index);
                                isEdit = false;
                              });
                            },
                            onTap: () {
                              RouterHelper.navigator
                                  .pushNamed(
                                    Routers.form,
                                    arguments: model.accounts[index],
                                  )
                                  .then((a) {
                                    if (a == null) return;
                                    model.editAccount(a as AccountItem, index);
                                  });
                            },
                          );
                        }),
                      ),
                    ),
                    const Text('Common Software'),
                    SizedBox(
                      height: 100,
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          addBtn('wx', model),
                          addBtn('qq', model),
                          addBtn('wb', model),
                          addBtn('dy', model),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
        );
      },
      model: Provider.of<UserModel>(context),
    );
  }

  Widget accountItem(
    AccountItem account, {
    required void Function() onTap,
    void Function()? onLongPress,
    void Function()? onDelete,
  }) {
    return GestureDetector(
      onTap: onTap,
      onLongPress: onLongPress,
      child: SizedBox(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            Stack(
              children: [
                Container(
                  width: 56,
                  height: 56,
                  margin: const EdgeInsets.only(top: 5),
                  decoration: BoxDecoration(
                    borderRadius: const BorderRadius.all(Radius.circular(12)),
                    color: Colors.white,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.shade200,
                        offset: const Offset(2, 3),
                        blurRadius: 4,
                      ),
                    ],
                  ),
                  child: Center(
                    child: Image.asset(
                      AccountList.categories[account.type]!.src,
                      width: 40,
                      height: 40,
                    ),
                  ),
                ),
                isEdit
                    ? GestureDetector(
                        behavior: HitTestBehavior.opaque,
                        onTap: onDelete,
                        child: Container(
                          width: 20,
                          height: 20,
                          margin: const EdgeInsets.only(left: 50, top: 0),
                          decoration: const BoxDecoration(
                            borderRadius: BorderRadius.all(Radius.circular(12)),
                            color: Colors.red,
                          ),
                          child: const Icon(
                            Icons.close_rounded,
                            size: 12,
                            color: Colors.white,
                          ),
                        ),
                      )
                    : const SizedBox(),
              ],
            ),
            const SizedBox(height: 5),
            Text(account.name ?? "", overflow: TextOverflow.ellipsis),
          ],
        ),
      ),
    );
  }

  Widget addBtn(String type, UserModel model) {
    return GestureDetector(
      onTap: () {
        RouterHelper.navigator
            .pushNamed(Routers.form, arguments: AccountItem(type: type))
            .then((a) {
              if (a == null) return;
              model.addAccount(a as AccountItem);
            });
      },
      child: SizedBox(
        child: Image.asset(
          AccountList.categories[type]!.src,
          width: 40,
          height: 40,
        ),
      ),
    );
  }
}
